<template>
  <t-modal
    title="导入"
    width="700px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="importModal-container"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <div class="import-header">
        <div class="name">
          上传前请先按Excel模板中的格式编辑内容
        </div>
        <div class="excel">
          <div class="icon"></div>
          <div class="btn" @click="downloadTemplate()">下载Excel模板</div>
        </div>
      </div>
      <div class="choose-file">
        <a-upload-dragger
          v-if="fileList.length == 0"
          name="file"
          accept=".xls,.xlsx"
          :showUploadList="false"
          :beforeUpload="beforeUpload"
        >
          <div class="icon">
            <a-icon type="cloud-upload" />
          </div>
          <div class="upload-tip">
            <span class="text_1">文件拖拽至此区域，或 </span>
            <span class="btn">点击添加</span><br />
            <span class="text_2">支持.xls，.xlsx格式，限5MB以内</span>
          </div>
        </a-upload-dragger>
        <div class="file-list" v-else>
          <div class="icon">
            <a-icon type="cloud-upload" />
            <div class="tip-text">文件正在上传...</div>
          </div>
          <div class="file-item">
            <div class="file-icon"></div>
            <div
              class="file-name"
              v-for="(item, index) in fileList"
              :key="index"
            >
              <div class="name">{{ item.fileName }}</div>
              <!-- <div class="progress">
                <div class="inner" :style="{ width: progress + '%' }"></div>
              </div> -->
            </div>
            <div class="file-close" @click="handelDeleteFile()">
              <a-icon type="close" />
            </div>
          </div>
        </div>
      </div>
      <div class="import-rule">
        <div class="title">导入规则</div>
        <div class="sort">
          1、请先下载模板，在模板中按要求填写总概算信息，然后上传该文件。
        </div>
        <div class="sort">2、文件大小不超过5MB。</div>
      </div>
    </div>
    <div class="curve-modal-footer">
      <a-button type="default" @click="closeModal()" :disabled="loading">
        取消
      </a-button>
      <a-button type="primary" @click="importExcel()" :loading="loading">
        确定
      </a-button>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import {
  downloadConfigTreeTemplate,
  importConfigTreeExcel,
} from "@/api/safetyManage";
import { downLoadFileByArraybuffer } from "@/utils/util";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Object,
      default() {
        return { footer: null };
      },
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      fileList: [],
      progress: 0,
      loading: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 下载模版
    downloadTemplate() {
      downloadConfigTreeTemplate()
        .then((res) => {
          downLoadFileByArraybuffer(res, "竣工资料-模版");
        })
        .catch((_) => {});
    },
    //导入
    importExcel() {
      this.loading = true;
      const formData = new FormData();
      formData.append("uploadFile", this.fileList[0].file);
      let { proCode } = this.parameter;
      importConfigTreeExcel(formData, proCode, (progress) => {
        this.progress = progress;
      })
        .then((res) => {
          let { data, statusCode, message } = res;
          if (statusCode == 200) {
            if (data.length > 0) {
              this.$notification["error"]({
                message: "提示",
                duration: 2,
                description: "以下数据导入失败：" + data.toString(),
              });
              this.progress = 0;
            } else {
              this.$message.success("导入成功", 1.5);
              this.closeModal();
            }
            this.$emit("import");
          } else {
            this.$message.error(message);
          }
        })
        .catch((err) => {})
        .finally((_) => {
          this.loading = false;
        });
    },

    //上传文件之前钩子
    beforeUpload(file) {
      let { name, size } = file;
      let lastIdx = name.lastIndexOf(".");
      let fileType = "." + name.substring(lastIdx + 1);
      const isLt5M = size / 1024 / 1024 < 5;
      if (fileType != ".xls" && fileType != ".xlsx") {
        this.$message.error("只能上传xls，xlsx文件!");
        return false;
      }
      if (!isLt5M) {
        this.$message.error("文件大小不能超过 5MB!");
        return false;
      }
      this.fileList = [
        {
          file,
          fileName: name,
          fileSize: size,
          fileType,
        },
      ];
      return false;
      const formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      axios
        .post(
          `/document/minio/uploadfile`,
          formData,
          {
            onUploadProgress: (event) => {
              const persent = Math.round((event.loaded * 100) / event.total);
              this.progress = persent;
            },
          },
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        )
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },

    handelDeleteFile() {
      this.fileList = [];
      this.progress = 0;
    },
    //关闭
    closeModal() {
      this.fileList = [];
      this.progress = 0;
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.importModal-container {
  .curve-modal-body {
    height: 385px;
    overflow: hidden;
    .btn {
      cursor: pointer;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #1677ff;
    }
    .import-header {
      margin-bottom: 16px;
      padding: 0 24px;
      height: 48px;
      background: #f0f2f5;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
      .excel {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 8px;
          width: 26px;
          height: 24px;
          background: url(https://jszhgd.cn/static/pc/file-icon/xls.png)
            no-repeat center;
          background-size: 100% 100%;
        }
      }
    }
    .choose-file {
      height: 220px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px dashed #d9d9d9;
      padding: 10px 16px;

      .ant-upload-list-text {
        display: none;
      }
      .ant-upload {
        border: none;
        background: #ffffff;
        .icon {
          position: absolute;
          top: 40px;
          left: 45%;
          transform: translateX(-50%);
          width: 32px;
          height: 32px;
          .anticon-cloud-upload {
            color: #d9d9d9;
            font-size: 100px;
          }
        }
        .upload-tip {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          .text_1 {
            font-size: 14px;
            color: #333333;
          }
          .text_2 {
            font-size: 12px;
            color: #666666;
          }
        }
      }

      .file-list {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;
        .icon {
          text-align: center;
          margin-bottom: 10px;
          .anticon-cloud-upload {
            color: #1677ff;
            font-size: 80px;
          }
          .tip-text {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }
        .file-item {
          width: 100%;
          padding: 12px 10px;
          height: 54px;
          background: rgba(22, 119, 255, 0.05);
          border-radius: 4px 4px 4px 4px;
          display: flex;
          align-items: center;
          .file-icon {
            width: 32px;
            height: 30px;
            background: url(https://jszhgd.cn/static/pc/file-icon/xls.png)
              no-repeat center;
            background-size: 100% 100%;
          }
          .file-name {
            padding: 0 8px;
            flex: 1;
            .name {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              .per {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #1677ff;
              }
            }
            .progress {
              width: 100%;
              height: 6px;
              background: rgba(22, 119, 255, 0.1);
              border-radius: 4px 4px 4px 4px;
              .inner {
                height: 100%;
                background: #1677ff;
                border-radius: 4px 4px 4px 4px;
              }
            }
          }
          .file-close {
            .anticon-close {
              cursor: pointer;
              font-size: 20px;
              color: #ff2d2d;
            }
          }
        }
      }
    }
    .import-rule {
      margin: 24px 0 10px 0;
      .title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
      .sort {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }
  }
  .curve-modal-footer {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
